windowPreview: Allow titles to overlap other previews

We are about to add additional chrome, but still want to use
as much space as possible for the previews. Allowing titles
to overlap other previews should help keeping the additional
whitespace requirement low.

https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/81

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1605>

diff --git a/js/ui/windowPreview.js b/js/ui/windowPreview.js
index 014b2cc581d8786514c434ddde2da2de9482e085..319ccf5f07c37cb34a7eca1ce796793bdf919aa3 100644 (file)
--- a/js/ui/windowPreview.js
+++ b/js/ui/windowPreview.js
@@ -429,14 +429,20 @@ var WindowPreview = GObject.registerClass({
         return app.get_name();
     }
 
+    overlapHeights() {
+        const [, titleHeight] = this._title.get_preferred_height(-1);
+
+        const topOverlap = 0;
+        const bottomOverlap = titleHeight / 2;
+
+        return [topOverlap, bottomOverlap];
+    }
+
     chromeHeights() {
         const [, closeButtonHeight] = this._closeButton.get_preferred_height(-1);
-        const [, titleHeight] = this._title.get_preferred_height(-1);
 
         const topOversize = (this._borderSize / 2) + (closeButtonHeight / 2);
-        const bottomOversize = Math.max(
-            this._borderSize,
-            (titleHeight / 2) + (this._borderSize / 2));
+        const bottomOversize = this._borderSize;
 
         return [topOversize, bottomOversize];
     }
@@ -462,6 +468,7 @@ var WindowPreview = GObject.registerClass({
             return;
 
         this._overlayShown = true;
+        this._restack();
 
         // If we're supposed to animate and an animation in our direction
         // is already happening, let that one continue
@@ -493,6 +500,7 @@ var WindowPreview = GObject.registerClass({
             return;
 
         this._overlayShown = false;
+        this._restack();
 
         // If we're supposed to animate and an animation in our direction
         // is already happening, let that one continue
@@ -739,6 +747,21 @@ var WindowPreview = GObject.registerClass({
         return true;
     }
 
+    _restack() {
+        // We may not have a parent if DnD completed successfully, in
+        // which case our clone will shortly be destroyed and replaced
+        // with a new one on the target workspace.
+        const parent = this.get_parent();
+        if (parent !== null) {
+            if (this._overlayShown)
+                parent.set_child_above_sibling(this, null);
+            else if (this._stackAbove === null)
+                parent.set_child_below_sibling(this, null);
+            else if (!this._stackAbove._overlayShown)
+                parent.set_child_above_sibling(this, this._stackAbove);
+        }
+    }
+
     _onDragBegin(_draggable, _time) {
         this.inDrag = true;
         this.hideOverlay(false);
@@ -760,16 +783,7 @@ var WindowPreview = GObject.registerClass({
     _onDragEnd(_draggable, _time, _snapback) {
         this.inDrag = false;
 
-        // We may not have a parent if DnD completed successfully, in
-        // which case our clone will shortly be destroyed and replaced
-        // with a new one on the target workspace.
-        let parent = this.get_parent();
-        if (parent !== null) {
-            if (this._stackAbove == null)
-                parent.set_child_below_sibling(this, null);
-            else
-                parent.set_child_above_sibling(this, this._stackAbove);
-        }
+        this._restack();
 
         if (this['has-pointer'])
             this.showOverlay(true);

diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index b9f8c27209a637d7297f0998c7a6d7ccd55e0827..a93ec27264ccb1691e4c0f98b52b956d1b196e82 100644 (file)
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -469,10 +469,11 @@ var WorkspaceLayout = GObject.registerClass({
             colSpacing += Math.max(leftOversize, rightOversize);
 
         if (containerBox) {
-            containerBox.x1 += leftOversize;
+            const [topOverlap, bottomOverlap] = window.overlapHeights();
+            containerBox.x1 += leftOversize + topOverlap;
             containerBox.x2 -= rightOversize;
             containerBox.y1 += topOversize;
-            containerBox.y2 -= bottomOversize;
+            containerBox.y2 -= bottomOversize + bottomOverlap;
         }
 
         return [rowSpacing, colSpacing, containerBox];